<html>
	<head>
		<title>Very Simple Context Menu vs-Context</title>
	<script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="vscontext.jquery.js"></script>
        <script type="text/javascript" src="menu_action.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
            $('#context').vscontext({menuBlock: 'vs-context-menu'});
	});
	</script>
        <style type="text/css" >
            @import "css/vscontext.css";
        </style>
        <style type="text/css" >
            body{
                padding-left: 15px;
                font-family: Verdana, Arial, Helvetica, sans-serif;
                font-size: 13px;
            }
            #context{
                width: 400px;
                height: 200px;
                border:1px solid #ECECEC;
                background: #CECECE;
            }
            code{
                background: #ECECEC;
            }
        </style>
	</head>
<body>
    <h1 align="center">jQuery vs-Contextmenu</h1>
    <h3 align="center">Very Simple Context Menu</h3>
    This plugin is build on very simple rule, their is 2 section.<br/>
    1) The area where we disable mouse right click menu and build our menu.<br/>
    2) The ul tag complied menu item, which will show when we click right mouse button.
    <br>
    To test the context menu just right click inside the gray box.
    <br><br><br>
	<div id="context">
	This is the testing block.

	</div>

    <div class="vs-context-menu">
        <ul>
            <li class="cut seprator"><a href="javascript:cut();" id="menu_1">Cut</a></li>
            <li class="copy"><a href="javascript:copy();" id="menu_2">Copy</a></li>
            <li class="paste seprator"><a href="javascript:paste();" id="menu_3">Paste</a></li>
            <li class="edit"><a href="javascript:edit();" id="menu_4">Edit</a></li>
            <li class="delete"><a href="javascript:del();" id="menu_5">Delete</a></li>
        </ul>
    </div>
    <br>
    Their is 3 important file you need to include in your application<br/>
    1) vscontext.jquery.js (Context Menu Login File).<br/>
    2) vscontext.css (Context Menu CSS File).<br/>
    3) A file which store your click function written on your menu items href attribute, (here i am using menu_action.js).<br/>
    <br/>
    <h1>How to build context menu</h1>
    <h3>Step 1 : Include files</h3>
    1) jquery.js<br/>
    2) vscontext.jquery.js<br/>
    3) menu_action.js (can use your own file name which have menu items action functions) <br/>
    4) css/vscontext.css<br/>
    <h3>Step 2 : Create area where you want to build context menu.</h3>
    <code>&lt;div id="context"&gt;This is the testing block.&lt;/div&gt;</code>
    <h3>Step 3 : Build Menu item list with action code</h3>
    <code> &lt;div class="vs-context-menu"&gt;<br/>
        &nbsp;&nbsp;&nbsp;&lt;ul&gt;<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    &lt;li class="cut seprator"&gt;&lt;a href="javascript:cut();" id="menu_1"&gt;Cut&lt;/a&gt;&lt;/li&gt;<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    &lt;li class="copy"&gt;&lt;a href="javascript:copy();" id="menu_2"&gt;Copy&lt;/a&gt;&lt;/li&gt;<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    &lt;li class="paste seprator"&gt;&lt;a href="javascript:paste();" id="menu_3"&gt;Paste&lt;/a&gt;&lt;/li&gt;<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    &lt;li class="edit"&gt;&lt;a href="javascript:edit();" id="menu_4"&gt;Edit&lt;/a&gt;&lt;/li&gt;<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    &lt;li class="delete"&gt;&lt;a href="javascript:del();" id="menu_5"&gt;Delete&lt;/a&gt;&lt;/li&gt;<br/>
        &nbsp;&nbsp;&nbsp;&lt;/ul&gt;<br/>
    &lt;/div&gt;<br/></code>
    <h3>Step 4 : Build ContextMenu Code</h3>
    <code>
        &lt;script type="text/javascript"&gt;<br/>
	&nbsp;&nbsp;&nbsp;$(document).ready(function(){<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('#context').vscontext({menuBlock: 'vs-context-menu'});<br/>
	&nbsp;&nbsp;&nbsp;});<br/>
	&lt;/script&gt;
    </code><br/><br/>
    Where #context is the id of div from step - 2.<br/>
    AND vs-context-menu is the class name from step - 3.
<br/><br/><br/>
<p>If You need any new feature or locate a bug pls drop me a comment :: <a target="_blank" href="http://intekhabrizvi.wordpress.com/2010/01/28/jquery-very-simple-contextmenu-plugin/">Here</a></p>
</body>
</html>
